<template>
	<view class="wrap">
		<view class="tilt1">设置支付密码</view>
		<view class="tilt2">设置6位数字密码组合</view>
		<view class=""><u-message-input mode="bottomLine" :focus="true" :value="defaultValue" :maxlength="6" active-color="#ffbb00" @finish="finish"></u-message-input></view>
		<view class="btnWrap"><view class="btn-bg-yellow" @click="goNext">下一步</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defaultValue: '',
			psd: ''
		};
	},
	methods: {
		finish(e) {
			// this.psd = e;
			this.defaultValue=e
			// console.log(this.defaultValue);
		},
		goNext() {
			if (this.defaultValue.length === 6) {
				let rule = /^[0-9]*$/;
				if (!rule.test(this.defaultValue)) {
					uni.showToast({
						title: '密码只能为数字',
						icon: 'none'
					});
					this.defaultValue=''
				} else {
					uni.navigateTo({
						url: '/pages_common/pages_me/assets/setPassword/confirmPsd?psd='+this.defaultValue
					});
				}
			} else {
				uni.showToast({
					title: '请输入6位数密码',
					icon: 'none'
				});
				return;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	.tilt1,
	.tilt2 {
		width: 85%;
		margin: 60rpx auto;
		font-size: 48rpx;
	}
	.tilt2 {
		width: 85%;
		margin: 60rpx auto;
		font-size: 30rpx;
		color: #999;
	}
	.btnWrap {
		width: 90%;
		margin: 60rpx auto;
		.btn-bg-yellow {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}
	}
}
</style>
